<template>
    <el-header>
      <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end;">
        <div style="display: flex;align-items:flex-start;flex: 1;">
          <div style="">
            <span style="font-weight: bold;font-size: 25px;">猪猪商城</span>
          </div>
        </div>
        <el-dropdown placement="bottom">
          <img :src="user.avatar" style="width: 50px;height: auto; border-radius: 50%;" alt="">
          <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="this.$router.push('/info')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="this.$router.push('/Collect')" >我的收藏</el-dropdown-item>
            <el-dropdown-item @click="layout()" >退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
        </el-dropdown>
      </div>
    </el-header>
  </template>
  <script>
  export default {
    data() {
      return{
        user:{}
      }
    },
    created(){
      this.user = JSON.parse(localStorage.getItem("user"))
      console.log();
    },
    components:{
    },
    methods: {
      HandleCollapse() {
        this.$store.commit("updateIsCollapse");
      },
      layout(){
        localStorage.removeItem("user");
        //跳转到登录界面
        this.$router.push('/');
      },
      navGo(url){
            this.$router.push(url);
        }
    },
  };
  </script>
  
  <style>
  .el-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70px;
    background: #ffffff;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  }
  .el-breadcrumb .el-breadcrumb__inner {
          color:black;
  
  }
  
  
  </style>